<template>
  <div class="card-list">
    <div class="card-item" v-for="(item, index) in data" :key="item.id">
      <div class="header-box" :class="[!item.cond ? 'no-padding-bottom' : '']">
        <div class="header" v-if="item.cond">
          <div class="row">
            <div class="no">{{ startLeft(index + 1) }}</div>
            <div class="item">
              <span class="label">{{ $t("table.rent.col_1") }}：</span>
              <span class="value">{{ item.part_no }}</span>
            </div>
          </div>
          <div class="item">
            <span class="label">{{ $t("table.rent.col_2") }}：</span>
            <span class="value">{{ item.descri }}</span>
          </div>
        </div>
        <div class="header" v-else>
          <div class="item">
            <span class="label">{{ $t("table.rent_airport.col_1") }}：</span>
            <span class="value">{{ item.no }}</span>
          </div>
          <div class="item">
            <span class="label">{{ $t("table.rent_airport.col_2") }}：</span>
            <span class="value">{{ item.descri }}</span>
          </div>
        </div>
        <div class="content" v-if="item.cond">
          <div class="item">
            <span class="label">{{ $t("table.rent.col_3") }}：</span>
            <span class="value">{{ item.number }}</span>
          </div>
          <div class="item">
            <span class="label">{{ $t("table.rent.col_4") }}：</span>
            <span class="value">{{ item.cond }}</span>
          </div>
          <div class="item">
            <span class="label">{{ $t("table.rent.col_5") }}：</span>
            <span class="value">{{ item.track }}</span>
          </div>
          <div class="item">
            <span class="label">{{ $t("table.rent.col_6") }}：</span>
            <span class="value">{{ item.part_no }}</span>
          </div>
        </div>
      </div>
      <div class="footer">
        <div @click="consult(item, index)">
          <IconConsult fill="#3D88F2" />
          <span>{{ $t("btnText.imed_consult") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup  lang="ts">
import { computed } from "vue";

type Props = {
  data: any[];
};

const emits = defineEmits(["consult"]);
const props = defineProps<Props>();

const startLeft = computed(() => {
  return (value: number | string) => {
    return value.toString().padStart(3, "0");
  };
});

const consult = (item, index) => {
  emits("consult", { item, index, type: "consult" });
};
</script>
<style scoped lang="less">
.card-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  font-size: 72px;
  .card-item {
    border-radius: 51px;
    border: 3px solid #cfd2cc;
    .header-box {
      padding: 60px;
      &.no-padding-bottom {
        padding-bottom: 0;
      }
      .row {
        display: flex;
        gap: 100px;
      }
    }
    .item {
      margin-bottom: 60px;
      .label {
        white-space: nowrap;
      }
    }
    .content {
      border-top: 1px solid #ccd6de;
      padding-top: 60px;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .footer {
      border-top: 1px solid #ccd6de;
      padding: 60px;
      color: #3d88f2;
      & > div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
      }
    }
  }
}
</style>